<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>markdown editor</title>

    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="libs/highlightjs/default.min.css">
    <link rel="stylesheet" href="libs/highlightjs/monokai_sublime.min.css">
    <link rel="stylesheet" href="./css/write.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
    <header>
        <div style="display: flex;justify-content: space-between;">
            <div>
                文章分类：
                <select id="type">
                    <option value="0">前端</option>
                    <option value="1">后端</option>
                    <option value="2">Andriod</option>
                    <option value="3">IOS</option>
                    <option value="4">人工智能</option>
                    <option value="5">数据库</option>
                    <option value="6">程序开发</option>
                </select>
            </div>
            <div>
                <button type="button" class="btn btn-secondary" id="close">关闭</button>
                <button type="button" id="save" class="btn btn-primary">保存</button>
            </div>
        </div>
        <input style="width: 100%;" type="text" name="" id="title" placeholder="文章标题">
        <input style="width: 100%;" type="text" name="" id="dec" placeholder="文章描述">
    </header>
    <div class="container-fluid">
        <div class="row">
            <!-- markdown编辑器div -->
            <div class="col-md-6" id="md-editor">
            </div>
            <!-- markdown预览框div -->
            <div style="overflow-wrap: break-word;" class="col-md-6" id="md-viewer">
            </div>
        </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="libs/ace/ace.js"></script>
    <script src="libs/marked.min.js"></script>
    <script src="libs/highlightjs/highlight.min.js"></script>
    <script src="./js/write.js"></script>
</body>

</html>